<template>
  <div>
    <van-dialog :width="isPc ? '420px' : '320px'" v-model:show="isShowChangePassDialog" :showConfirmButton="false">
      <div class="py-4 px-6 lg:py-8 bg-[#332d2d] relative">
        <div
          @click="isShowChangePassDialog = false"
          class="cursor-pointer flex items-center justify-center absolute top-4 lg:top-5 right-6">
          <van-icon name="cross" color="#fff" size="20" />
        </div>
        <div class="flex items-center justify-between">
          <div class="uppercase text-base lg:text-xl font-medium lg:pb-10 pt-2 pb-5 text-white">
            {{ $mt('RESET PASSWORD') }}
          </div>
        </div>
        <van-form ref="formRef">
          <!-- email -->
          <div class="mb-2.5 lg:mb-5 rounded-3xl bg-input-color py-0.5">
            <van-field
              v-model="formData.email"
              name="email"
              :placeholder="$mt('Email')"
              :rules="[
                {
                  required: true,
                  trigger: 'onSubmit',
                  message: $mt('Please enter a valid email address'),
                },
                {
                  pattern,
                  message: $mt('Please enter a valid email address'),
                  trigger: 'onSubmit',
                },
              ]">
              <template #left-icon>
                <van-icon name="user-circle-o" size="22px" color="#fff" />
              </template>
            </van-field>
          </div>
          <!-- code -->
          <div class="mb-2 lg:mb-5 rounded-3xl bg-input-color">
            <van-field
              type="text"
              v-model="formData.code"
              name="code"
              :placeholder="$mt('Verification Code')"
              :rules="[
                {
                  required: true,
                  message: $mt('Please enter the verification code'),
                  trigger: 'onSubmit',
                },
              ]">
              <template #left-icon>
                <van-icon name="setting-o" size="22px" color="#fff" />
              </template>
              <template #button>
                <van-button @click="getCaptcha" size="small" color="#EB414E">
                  {{ isCountingFinished ? $mt('Get Captcha') : `${$mt('wait')} ${count}s ${$mt('resend')}` }}
                </van-button>
              </template>
            </van-field>
          </div>
          <!-- pass -->
          <div class="rounded-3xl lg:mb-5 bg-input-color py-0.5">
            <van-field
              v-model="formData.password"
              :placeholder="$mt('Password')"
              :rules="[{ required: true, trigger: 'onSubmit', message: $mt('Please enter password') }]">
              <template #left-icon>
                <van-icon name="lock" size="22px" color="#fff" />
              </template>
            </van-field>
          </div>
        </van-form>
        <button
          name="button"
          @click="handleFormSubmit"
          class="mx-auto mt-6 flex w-[70%] items-center justify-center rounded-3xl bg-red1 py-2.5">
          <span class="text-xs font-[500] text-white">{{ $mt('SUBMIT') }}</span>
        </button>
      </div>
    </van-dialog>
  </div>
</template>

<script setup lang="ts">
import { useMemberStore } from '~/store/member'
const userEmail = useLocalStorage('userEmail', '')
const emits = defineEmits(['pwdChange'])
const formRef = ref()
const { requestGet, requestPost } = useRequest()
const { count, startCounting, isCountingFinished } = useCounting()
const formData = ref({
  code: '',
  email: '',
  password: '',
})
const { $mt, $isPcScreen } = useCommonPlugin()
const memberStore = useMemberStore()
const isShowChangePassDialog = ref(false)

// 获取验证码
const getCaptcha = async () => {
  if (!isCountingFinished.value) return
  await formRef.value.validate('email')
  await requestPost('/app/sso/sendEmailCode', {
    email: formData.value.email,
  })
  showToast($mt('Verification code sent successfully'))
  return startCounting()
}
// 修改密码
const handleFormSubmit = async () => {
  await formRef.value.validate()
  showLoadingToast()
  await requestPost('/app/sso/changePassword', formData.value)
  userEmail.value = formData.value.email
  showToast({ message: $mt('Password changed successfully!'), wordBreak: 'normal' })
  isShowChangePassDialog.value = false
  emits('pwdChange', formData.value.password)
}
const isPc = ref(false)
watch(
  () => $isPcScreen(),
  () => {
    isPc.value = true
  },
  { immediate: true },
)

defineExpose({
  showDialog: () => {
    isShowChangePassDialog.value = true
    formData.value = {
      code: '',
      email: '',
      password: '',
    }
  },
})
</script>

<style scoped lang="scss">
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
  -webkit-text-fill-color: #fff !important;
  transition: background-color 5000s ease-in-out 0s !important;
}
:deep(.van-cell) {
  background-color: unset;
}

:deep(.van-cell:after) {
  display: none;
}

:deep(.van-field__control) {
  font-size: 12px;
  color: #fff;
}

:deep(.van-field__control:focus-visible) {
  outline-offset: unset;
}

:deep(.van-field__left-icon) {
  margin-right: 14px;
}
</style>
